/**
 * H5PageProperty module
 */

 var React = require("react");
 var tool = require("../../../util/tool");
 var storage = require("../../../util/storage");
 var SingleUpload = require("../../../util/upload/SingleUpload");
 var H5PageProperty = React.createClass({
    getInitialProps: function (){
        return {
            jump: {},
            widget: {}
        }
    },
    getInitialState: function (){
        return {
            h5_shared_title: ""
        }
    },
    componentWillMount: function (){
        var self = this;
        this.timer = setInterval(function (){
            var page_jump = self.props.jump;
            if (!tool.isEmptyObject(page_jump)){
                clearInterval(self.timer);
                self.setState({
                    h5_shared_title: page_jump.h5_shared_title
                });
            }
        }, 1);

        var parent = this.props.parent;
        this.handleOnPageJumpClick = parent.handleOnPageJumpClick;
    },
    componentWillUnmount: function (){
        clearInterval(this.timer);
    },
    handleOnTitleChanged: function (e){
        var element = $(e.target || e.srcElement);
        var title = element.val();
        this.setState({
            h5_shared_title: title
        });
    },
    render: function (){
        var root = this.props.root;
        var page = this.props.page;
        var parent = this.props.parent;
        var page_jump = this.props.jump;
        var prompt = page_jump.h5_has_turning_tip;
        var back_img = page_jump.h5_has_back_image;
        var imgurl = page_jump.h5_shared_url || storage.data.CONST.media_src;
        var h5_shared_switch = page_jump.h5_shared_switch || 0;
        return (
              <div>
                <div className="h5_title">{$._("H5 page property")}</div>
                <div className="h5_turing_info">
                    <div className="H5share">
                        <div className="rowlist">
                            <div className='h5-item'>
                                <span>{$._('Page prompts')}</span>
                                <div className={"page-item page-item-turning info-item-icon " + (prompt ? "icon-uniF52F" : "icon-uniF471")} onClick={this.handleOnPageJumpClick.bind(null, "h5_has_turning_tip")} name='h5_has_turning_tip' id='h5_has_turning_tip'></div>
                            </div>
                            <div className='h5-item'>
                                <span>{$._("Use H5 share")}</span>
                                <div className={"page-item repeat info-item-icon " + (!h5_shared_switch ? "icon-uniF471" : "icon-uniF52F")} onClick={this.handleOnPageJumpClick.bind(null, "h5_shared_switch")} name='h5_shared_switch' id='h5_shared_switch'></div>
                            </div>
                            <div className='h5-item-tip'>{$._('Closed app will use the screenshot')}</div>
                        </div>
                        <div className="rowlist">
                            <div>{$._("Weixin share icon")}</div>
                            <div className="shareIme">
                                <div onClick={parent.handleOnStartUpload} style={{backgroundImage:'url('+imgurl+')'}}>
                                    <input type="file" id='sharefile' style={{display: 'none'}} accept='.png,.jpg,.jpeg,.PNG,.JPG,.JPEG' />
                                </div>
                            </div>
                            <div className="shareImgTip">{$._("Upload image smaller than 480")}</div>
                            <div id='logo_upload_error'></div>
                        </div>
                        <div className="rowlist shareTitle">
                            <div>{$._("Weixin share title")}</div>
                            <input className="sharetitle form-control page-item" value={ this.state.h5_shared_title } name='h5_shared_title' onChange={this.handleOnTitleChanged} onBlur={this.handleOnPageJumpClick.bind(null, "h5_shared_title")} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
 });

 module.exports = H5PageProperty;
